<template>
  <div class="wrap">
    <xcl-header :show="loading.show" :call-back="()=>{}" :page-title="pageTitle"></xcl-header>
    <xcl-footer :show="loading.show" :show-txt="loading.showTxt"></xcl-footer>
    <div class="content infinite-scroll" id="content">
			<div class="card" style="margin:0">
		    <xcl-slider :banner-img="bannerImg"></xcl-slider>
		    <div class="card-content">
		    	<div class="row" style="padding-bottom:0.3rem">
			      <div class="col-25 tab-item-link" v-link="{name:'Newslist',params:{tn:4}}">
			      	<img src="../asserts/images/home_pro_rec.png" width="45%">
			      	<span class="link-item">私募动态</span>
			      </div>
			      <div class="col-25 tab-item-link" v-link="{name:'Newslist',params:{tn:2}}">
			      	<img src="../asserts/images/home_pro_new.png" width="45%">
			      	<span class="link-item">私募观点</span>
			      </div>
			      <div class="col-25 tab-item-link" v-link="{name:'Newslist',params:{tn:3}}">
			      	<img src="../asserts/images/home_pro_hot.png" width="45%">
			      	<span class="link-item">研究报告</span>
			      </div>
			      <div class="col-25 tab-item-link" v-link="{name:'Newslist',params:{tn:9}}">
			      	<img src="../asserts/images/home_pro_sta.png" width="45%">
			      	<span class="link-item">投资建议</span>
			      </div>
			    </div>		      
		    </div>
		  </div>
		  <div v-if="topics.length === 0  && loading.show === false" >
	      <div class="no-data">暂无数据</div>
	    </div>
      <div class="card" v-for="i in topics" transition="fade" v-link="{ name:'ProductDetail', params:{SId: i.sid}}">
          <div class="card-header">
          	<div class="col-100 text-oneline">{{i.pn}}</div>
          </div>
          <div class="card-content">
            <div class="card-content-inner">
                  <div class="row text-center">
                    <div class="col-33">
                        <div>今日收益</div>
                        <div>{{{i.ftir | formatPercent}}}</div>
                    </div>
                    <div class="col-33">
                        <div>累计收益</div>
                        <div>{{{i.feir | formatPercent}}}</div>
                    </div>
                    <div class="col-33">
                        <div>新策略评级</div>
                        <div>{{i.tr}}</div>
                    </div>
                  </div>
            </div>
          </div>
          <div class="card-footer">“稳健的投资风格，可观的投资回报，不可错过！”</div>
        </div>
          <!-- 下拉刷新提示符 -->
          <!--<div class="infinite-scroll-preloader" transition="fade" v-show="loading.show" data-distance="100">
              <div class="preloader"></div>
          </div>-->
          <!-- 没有数据 -->
          <div class="no-data-index" v-if="nodata">没有更多的数据了...</div>
    </div>
    <!-- 页面提示符 -->
     <xcl-loading :show="loading.show" :show-txt="loading.showTxt"></xcl-loading> 
  </div>
</template>

<script>
  import xclHeader from '../components/header.vue'
  import xclFooter from '../components/footer.vue'
  import xclLoading from '../components/loading.vue'
  import xclSlider from '../components/slider.vue'
  let DataGradeProxy =  require("../proxy/data_grade_proxy");
  let product = new DataGradeProxy();
  export default {
        data (){
            return {
                scroll:true,
                pageTitle:'新策略',
                topics:[],
                nodata:false,
                bannerImg:['./src/asserts/images/banner01.png','./src/asserts/images/banner02.png','./src/asserts/images/banner.png'],
                searchKey:{
                    page:1,
                    limit:4
                },
                 loading:{
                    show:false                }
            }
        },
        route:{
            data(){
               //页面初次加载获取的数据
              this.getTopics();
            },
            deactivate (transition){
                $('#content').off('scroll');
                transition.next();
            }
        },
        ready (){
          $('#content').on('scroll', () => {
                this.getScrollData();
              });
        },
        methods:{
            getTopics (){
                var _this=this;
                _this.scroll = false;
                _this.loading.show=true;
                product.getFundGrades('','',0,-1,-1,-1,-1,1,false,this.searchKey.page,this.searchKey.limit,'_yearProfit',function(d){
                    if(d.code === 200 && d.results && d.results.length){
                      _this.scroll = true;
                      _this.topics = _this.topics.concat(d.results);
                    }else{
                      _this.nodata = true;
                    }
                    _this.loading.show=false;
                });                
            },
            //滚动加载数据
            getScrollData (){
                if(this.scroll){
                    let $content=$('#content');
                    if ($content.height() + $content[0].scrollTop >= $content[0].scrollHeight - 10) {
                        this.scroll = false;
                        this.searchKey.page++;
                        this.getTopics();
                    }
                }
            }
        },
        components:{
           "xclHeader":xclHeader,
           "xclFooter":xclFooter,
           "xclLoading":xclLoading,
           "xclSlider":xclSlider
        }
  }
</script>
<style lang="stylus">
.panes.animate
  .pane
    transition: all .3s
    -webkit-transition: all .3s;
.tab-item-link
	text-align:center
	.link-item
		display:block
.icon-size
	font-size:1.2rem
.no-data-index
  padding:0 0 0.5rem
  font-size:0.75rem
  text-align:center  
  color:#ccc                
</style>
